<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
</head>
<body>
  <style>
  *{
      margin: 0px;
      padding: 0px;
   }
   .box1{
    width: 1300px;
    height: 460px;
    background-color:#fff;
    margin: 140px auto;
   
   }
   .box2{
    width: 1100px;
    height: 460px;
    margin: auto;
    overflow: hidden;
   }
   .box2 img{
    width: 100%;
    height: 100%;
    display: block;
   }
   .box3{
    width: 50px;
    height: 80px;
    position: absolute;
    top: 347px;
    left: 300px;
    }
    .box3 button{
    width: 41px;
    height: 69px;
    margin-right: 12px;
    /* appearance: none; */
    border: none;
    color:#aba7a7;
    background-color: transparent;
    cursor: pointer;
    font-size: 50px;
    }
    .box3 button:hover{
      background-color: gray;
      color:#fff
    }
    .box5{
    width: 50px;
    height: 80px;
    position: absolute;
    top: 347px;
    right: 292px;
    }
    .box5 button{
    width: 41px;
    height: 69px;
    margin-right: 12px;
    /* appearance: none; */
    border: none;
    color:#aba7a7;
    background-color:transparent;
    cursor: pointer;
    font-size: 50px;
    }
    .box5 button:hover{
      background-color: gray;
      color:#fff
    }
    .box7{
      width: 400px;
      height: 21px;
      position: absolute;
      top:567px;
      right: 85px;
    }
    .box8{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }
    .box8 li{
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background:#666565;
      opacity: 0.4;
      cursor: pointer;
    }
    .box8 li.active{
      width: 8px;
      height: 8px;
      opacity: 1; 
    } 
  </style>
  <div class="box1">
    <div class="box2">
     <img src = "lpt.webp">
    </div>
    <div class="box3">
      <button class="box4">&lt;</button>
    </div>
    <div class="box5">
      <button class="box6">&gt;</button>
    </div>
    <div class="box7">
      <ul class="box8">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script>
    const tp = [
      {url:'./lpt.webp'},
      {url:'./lpt1.jpg'},
      {url:'./lpt2.webp'},
      {url:'./lpt3.webp'},
      {url:'./lpt4.webp'},
      {url:'./lpt5.webp'}
    ]
    const box4 = document.querySelector('.box4')
    const box6 = document.querySelector('.box6')
    const img = document.querySelector('.box2 img')
    let i = 0
    box6.addEventListener('click', function(){
      i++
      if(i >= tp.length){
        i = 0
      }
      img.src = tp[i].url
      document.querySelector('.box8 .active').classList.remove('active')
      document.querySelector(`.box8 li:nth-child(${i+1})`).classList.add('active')
    })
    box4.addEventListener('click', function(){
      i--
      if(i < 0){
        i = 5
      }
      img.src = tp[i].url
      document.querySelector('.box8 .active').classList.remove('active')
      document.querySelector(`.box8 li:nth-child(${i+1})`).classList.add('active')
    })
    let n = setInterval(function(){
      box6.click()
    },1250)
    const box2 = document.querySelector('.box2')
    box2.addEventListener('mouseenter', function(){
      clearInterval(n)
    })
    box2.addEventListener('mouseleave', function(){
      clearInterval(n)
      n = setInterval(function(){
        box6.click()
      },1250)
    })
  </script>
</body>
</html>